<style>
  #app {
    height: 100%;
    width: 100%;
    background-color: skyblue;
  }
  #app input {
    width: 100%;
    height: 30px;
  }
</style>

<div id="app">
  <input type="text" id="input" />
  <h1 id="target"></h1>
</div>
<script> 
  function debounce(fn, delay = 1000) {
    let timer = null;
    return function () {
      if (timer) {
        clearTimeout(timer);
      }
      timer = setTimeout(() => {
        fn.apply(this, arguments);
        timer = null;
      }, delay);
    };
  }

  let input = document.querySelector("#input");
  let target = document.querySelector("#target");
  //   function ajaxValue() {
  //     target.innerText = input.value;
  //   }
  input.addEventListener(
    "keyup",
    debounce(() => {
      target.innerText = input.value;
    }, 600)
  );
</script>
